<template>
	<div class="site_portal_wrapper" v-loading="loading">
		<el-tabs class="custom_top" type="card" v-model="activeName">
			<el-tab-pane label="所有站点" name="1"></el-tab-pane>
			<el-tab-pane label="我管理的站点" name="2"></el-tab-pane>
		</el-tabs>
		<div class="bodybox">
			<template v-if="protalSiteList.length > 0">
				<el-row :gutter="16">
					<el-col :span="responsive" v-for="(item, index) in protalSiteList" :key="index">
						<el-card shadow="hover">
							<div class="img">
								<img :src="item.filed1Name" :alt="item.name" />
								<template v-if="isCanEdit(item)">
									<el-switch v-model="item.del" active-value="1" inactive-value="2" @change="handleSwitchChange($event, item)"></el-switch>
								</template>
							</div>
							<div class="tit">{{ item.name }}</div>
							<el-dropdown size="medium" @command="handleCommand($event, item)" v-if="isCanEdit(item)">
								<el-button size="mini">操作</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="edit" icon="el-icon-edit">编辑站点</el-dropdown-item>
									<el-dropdown-item command="del" icon="el-icon-delete">删除站点</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<div class="btn">
								<el-button size="mini">预览</el-button>
								<el-button size="mini" v-if="isCanEdit(item)">后台</el-button>
							</div>
						</el-card>
					</el-col>
					<el-col :span="responsive" v-if="activeName === '2'">
						<el-card shadow="hover">
							<div class="add_btn" @click="handleAddedPortal()">
								<i class="el-icon-plus"></i>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryPortalSiteData"></sw-pagination>
			</template>
			<div class="empty" v-else-if="!isFirst">
				<el-empty :image-size="200"></el-empty>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getPortalSitePageList, updateDelPortalSite } from '@/api/portal/tbSiteInfo';
export default {
	data() {
		return {
			isFirst: true,
			loading: false,
			activeName: '1',
			responsive: 6,
			queryData: {
				page: 1,
				limit: 60
			},
			dataCount: 0,
			queryPages: [60, 120, 240],
			protalSiteList: []
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		isCanEdit() {
			return (data) => {
				if (this.userInfo.account !== 'admin' && this.userInfo.account !== 'dever') {
					return data.userMList.some((item) => item.userId === this.userInfo.id);
				} else {
					return true;
				}
			};
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.isFirst = true;
				this.protalSiteList = [];
				this.queryPortalSiteData();
			},
			immediate: true
		}
	},
	mounted() {
		this.dynamicUpdateColumn();
		window.addEventListener('resize', () => {
			this.dynamicUpdateColumn();
		});
	},
	methods: {
		//获取站点数据
		async getPortalSiteData() {
			let params = { ...this.queryData, isAll: this.activeName };
			let result = await getPortalSitePageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.protalSiteList = !result.data
					? []
					: result.data.map((n) => {
							return { ...n, filed1Name: window.staticPath + n.filed1Name };
					  });
			}
		},

		//查询站点数据
		async queryPortalSiteData() {
			this.loading = true;
			await this.getPortalSiteData();
		},

		//添加站点
		handleAddedPortal() {
			this.$router.push({ path: '/applications/add' });
		},

		//点击下拉菜单
		handleCommand(command, data) {
			if (command === 'edit') {
				this.$router.push({ path: '/applications/edit', query: { id: data.id } });
			} else if (command === 'del') {
			}
		},

		//删除站点
		handleDeletePortal(data) {},

		//动态列数
		dynamicUpdateColumn() {
			let width = document.body.clientWidth;
			if (width >= 1680) {
				this.responsive = 4;
			} else if (width >= 1440) {
				this.responsive = 5;
			} else {
				this.responsive = 6;
			}
		},

		//切换上架下架
		async handleSwitchChange(e, data) {
			let params = { id: data.id, del: e };
			let result = await updateDelPortalSite(params).then((res) => res.data);
			if (result.code === '0') {
				let message = e === '1' ? '站点上线成功' : '站点下线成功';
				this.$message.success(message);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.site_portal_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;

	.el-tabs {
		flex-shrink: 0;
	}

	.empty {
		display: flex;
		align-items: center;
		height: 100%;
		overflow: hidden;
	}

	.bodybox {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 0 16px 16px;
		overflow: hidden;

		.el-row {
			flex: 1;
			overflow: hidden;
			overflow-y: auto;
		}

		.el-col {
			margin-top: 16px;
		}

		.el-col-5 {
			width: 20%;
		}

		.el-card__body {
			padding: 0;
			cursor: pointer;
		}

		.add_btn {
			position: relative;
			padding-top: calc(56.25% + 68px);

			&:hover {
				color: var(--primary-hover);
			}

			i.el-icon-plus {
				position: absolute;
				top: 50%;
				left: 50%;
				font-size: 36px;
				transform: translate(-50%, -50%);
			}
		}

		.img {
			position: relative;
			padding-top: 56.25%;
			background-color: #eee;
			border-bottom: solid 1px #ebeef5;

			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.el-switch {
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
		}

		.tit {
			padding: 10px;
			line-height: 1;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.btn {
			padding: 0 10px 10px;
		}

		.el-dropdown {
			float: right;
			margin-right: 10px;
		}

		.el-button {
			padding: 5px 10px;
		}
	}
}
</style>
